<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script  src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<!-- 目标：掌握async和await的语法 ，解决回调函数的地狱 
在async函数内，使用await关键字 获取Promise对象成功状态结果值
await会组织“异步编程的代码继续执行，原地等待结果-->
<!-- 定义async修饰函数 -->
<!-- 在async函数中，使用await关键字取代then函数，等待获取Promise对象成功状态的结果值 -->
<script>
 //1。定义async修饰的函数
 async function getData(){
    //用try包裹可能产生错误的代码
    try{
        const  pObj=await axios({url:'http://hmajax.itheima.net/api/province'})
        const pname=pObj.data.list[0]
        const cObj=await axios({url:'http://hmajax.itheima.net/api/city',params:{pname}})
        const cname=cObj.data.list[0]
        const aObj=await axios({url:'http://hmajax.itheima.net/api/area',params:{
    pname,cname
  }})
  //捕获async函数和await错误
  //使用try { }catch(error){console.dir(error)}
  const areaName=aObj.data.list[0]
  document.querySelector('.province').innerHTML=pname
  document.querySelector('.city').innerHTML=name
  document.querySelector('.area').innerHTML=areaName
    }catch(error){
      //接着调用catch快，接受错误信息
        console.dir(error)
    }
 }
</script>

</body>
</html>